<template>
  <div class="father">
      <h1>v-modelFather组件</h1>
      <h2>Father组件的用户名:{{ username }}</h2>
      <h2>Father组件的密码:{{ password }}</h2>

      <!-- 原始html标签，v-model绑定可以实现双向数据绑定 -->
      <!-- <input type="text" v-model="username"> -->

      <!-- 原始html标签，动态绑定value属性实现数据流向input的单向绑定 -->
      <!-- <input type="text" :value="username"> -->

      <!-- 原始html标签，给input绑定input事件实现input里输入的数据修改username的单向绑定 -->
      <!-- <input type="text" @input="username = ($event.target).value"> -->

      <!-- 自定义组件，实现数据流向input，子组件通过defineprops接收，然后动态绑定 -->
      <!-- 这里就是组件的props传递 -->
      <!-- <CustomInput :yonghuming="username" :mima="password"/> -->

      <!-- 自定义组件，实现输入的数据同步到当前页面的数据 -->
      <!-- 这里就是组件的事件传递,子组件调用事件传回的参数赋值给当前页面的数据 -->
      <!-- <CustomInput @update:yonghuming="username = $event" @update:mima="password = $event"/> -->
    
      <!-- 自定义组件，必须保证props和自定义事件的名字一样 -->
      <CustomInput v-model:yonghuming="username" v-model:mima="password"/>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import CustomInput from './customInput.vue'
  // 数据
  let username = ref('zhansgan')
  let password = ref('123456')
</script>
<style scoped>
</style>